.typography {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-m);
  color: var(--color-light-100);
}

.large {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-l);
}

.h1 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-l);
}

.h2 {
  font-size: var(--font-size-l);
}

.h3 {
  font-size: var(--font-size-m);
}

.body1 {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-regular);
}

.subtitle1 {
  font-size: var(--font-size-m);
}

.body2 {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
}

.subtitle2 {
  font-size: var(--font-size-s);
}

.caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-size-m);
}

.overline {
  font-size: var(--font-size-xs);
  line-height: var(--font-size-m);
}

.link1 {
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  color: var(--color-info-500);
  text-decoration: underline;
}

.link2 {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-size-m);
  color: var(--color-info-500);
  text-decoration: underline;
}

.error {
  font-size: var(--font-size-xs);
  line-height: var(--font-size-m);
  color: var(--color-danger-300);
}
